<template>
  <div v-loading='loading'>
    <el-card class="box-card" header="商家总数量">
      <span>{{indexdata['merchantCount']}}</span>
    </el-card>
    <el-card class="box-card" header="今日新增商家数量">
      <span>{{indexdata['todayCreateMerchantCount']}}</span>
    </el-card>
    <el-card class="box-card" header="30天内到期商家数量">
      <span>{{indexdata['endTime30days']}}</span>
    </el-card>
    <el-card class="box-card" header="过期商家数量">
      <span>{{indexdata['passEndTime']}}</span>
    </el-card>
    <el-card class="box-card" header="小程序开通数量">
      <span>{{indexdata['openMiniAppCount']}}</span>
    </el-card>
    <el-card class="box-card" header="VIN查询开通数量">
      <span>{{indexdata['openVinCount']}}</span>
    </el-card>
    <el-card class="box-card" header="平台商品数量">
      <span>{{indexdata['goodsCount']}}</span>
    </el-card>
    <el-card class="box-card" header="今日新增商品数量">
      <span>{{indexdata['todayCreateGoodsCount']}}</span>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      loading:true,
      indexdata:{
      }
    }
  },
  methods:{
    indexInit:function(){
      this.loading=true;
       this.$http.post(this.$store.state.url+"/index/data").then(
        responese=>{
          this.loading=false;
          if(responese.data.status==200){
            this.indexdata=responese.data.data;
          }
        }
      ).catch();
    }
  },
  created:function(){
    this.indexInit();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box-card {
  float: left;
  width: 20%;
  margin: 0px 25px 25px;
  font-size: 16px;
  text-align: center
}
.box-card span{
  line-height:60px;
  font-size:30px
}
</style>
